<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="favicon.ico">

    <title>管理后台</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.validator.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <style type="text/css">
      .navbar {
      	border-radius: 0;
      	margin-bottom: 0;
      	min-height: 30px;
      }

      .navbar-brand {
      	float:left;
      	padding:5px 15px 5px 15px;
      	font-size:18px;
      	line-height:20px;
      	height:30px
      }

      .navbar-nav>li>a{
      	padding-top:5px;
      	padding-bottom:5px;
      	line-height:20px
      }
   	  .navbar-toggle {
   	  	padding: 6px 10px;
   	  	margin: 1px 15px 1px 1px;
   	  }

      .navbar>.container-fluid .navbar-brand {
        margin-left:0px;
      }

      .header {
  	  	background-color: #184a7d;
  	 	  background-image: -moz-linear-gradient(top,#17568c,#1a3867);
  	 	  background-image: -webkit-gradient(linear,0 0,0 100%,from(#17568c),to(#1a3867));
  	  	background-image: -webkit-linear-gradient(top,#17568c,#1a3867);
  	  	background-image: -o-linear-gradient(top,#17568c,#1a3867);
  	  	background-image: linear-gradient(to bottom,#17568c,#1a3867);
  	  	background-repeat: repeat-x;
  	  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff17568c', endColorstr='#ff1a3867', GradientType=0);
  	  	border-top: 1px solid rgba(255,255,255,0.2);
  	  	padding: 5px 15px;
        margin-top: 30px;
      }
      .header .page-header {
      	margin:0;
      	padding-bottom:0px;
      	border-bottom:0;
        padding-left: 15px;
      }
      .header .page-header .logo {
      	color: white;
		    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
		    font-weight: normal;
		    font-size: 20px;
		    line-height: 35px;
        margin-right: 12px;
      }
      .header .page-header .title {
	  	  color: white;
		    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
		    font-weight: normal;
		    font-size: 19px;
		    line-height: 30px;
      }

      .header.sub {
      	background: #ffffff;
  		  background: -moz-linear-gradient(top,#ffffff 0%,#ededed 100%);
  		  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#ededed));
    		background: -webkit-linear-gradient(top,#ffffff 0%,#ededed 100%);
    		background: -o-linear-gradient(top,#ffffff 0%,#ededed 100%);
    		background: -ms-linear-gradient(top,#ffffff 0%,#ededed 100%);
    		background: linear-gradient(top,#ffffff 0%,#ededed 100%);
    		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0);
    		border-bottom: 1px solid #D3D3D3;
    		margin: 0 0 5px 0;
  	  }

  	  .header.sub .row-fluid {
  		  margin: 5px 10px 5px 10px;
  	  }
    	  
    	.header.sub .row-fluid .toolbar {
  	    position:relative;display:inline-block;vertical-align:middle
  	  }
      

      .container.modal-body {
        position: absolute;
        top: 50%;
        left: 50%;
        padding-left: 0px;
        padding-right: 0px;
        width: 250px;
        margin-top: -120px;
        margin-left: -126px;
        text-align: center;
      }

      .content .body {
        margin-top: 15px;
        margin-bottom: 35px;
        padding: 0px 25px;
      }

      .modal {
        overflow-y: auto;
      }

    </style>

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Static navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Material</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">系统 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="system/control.html">控制面板</a></li>
                <li class="divider"></li>
                <li><a href="system/info.html">系统信息</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">用户 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">用户管理</li>
                <li><a href="user/users.html">用户列表</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">项目 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">项目管理</li>
                <li><a href="project/projects.html">项目列表</a></li>
                <li class="dropdown-header">项目实施</li>
                <li><a href="project/projects.html">材料计划</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">计划 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">材料计划</li>
                <li><a href="#">提交材料计划</a></li>
                <li><a href="#">材料计划</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">材料 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">材料库存</li>
                <li><a href="#">材料出库</a></li>
                <li><a href="#">材料验收</a></li>
                <li class="dropdown-header">付款信息</li>
                <li><a href="#">付款记录</a></li>
              </ul>
            </li>
            <li><a href="#help">帮助</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#" onclick="$(this).parent().parent().parent().removeClass('open');$('#modal-user-info').modal()">个人信息</a></li>
                <li><a href="#" onclick="$(this).parent().parent().parent().removeClass('open');$('#modal-user-passwd').modal()">修改密码</a></li>
                <li class="divider"></li>
                <li><a href="#" onclick="$(this).parent().parent().parent().removeClass('open');$('#modal-logout').modal()">注销</a>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div><!--/.container-fluid -->
    </div>

    <!-- Content -->
    <div class="content" role="content">
      
    </div>
    
	  <!-- Begin Status Module -->
    <div class="navbar navbar-fixed-bottom hidden-phone" role="footer">
      <div class="toolbar pull-right">
        <p>© 2014 Mailerm</p>
      </div>
    </div>
    <!-- End Status Module -->

    <!-- hidden elements -->
    <div class="fade modal" id="modal-load">
      <div class="modal-body container">
        <div class="well"> 
          <img src="images/loader.gif"><br><br>
          <span class="label label-info">内容加载中，请稍后...</span>
        </div>
      </div>
    </div>

    <!--- User info -->
    <div class="modal fade" id="modal-user-info" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">个人信息</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label class="col-sm-2 control-label">账号</label>
                <div class="col-sm-10">
                  <p class="form-control-static" for="account"></p>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">角色</label>
                <div class="col-sm-10">
                  <p class="form-control-static" for="role"></p>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&nbsp;关&nbsp;&nbsp;闭&nbsp;</button>
          </div>
        </div>
      </div>
    </div>

    <!--- User passwd -->
    <div class="modal fade" id="modal-user-passwd" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">修改密码</h4>
          </div>
          <div class="modal-body">
            <form method='post' action='user/passwd' class="form-horizontal" id="form-user-passwd">
              <div class="form-group">
                  <label class="col-lg-4 control-label">当前密码</label>
                  <div class="col-lg-5">
                      <input type="password" class="form-control" name="current" />
                  </div>
              </div>

              <div class="form-group">
                  <label class="col-lg-4 control-label">新密码</label>
                  <div class="col-lg-5">
                      <input type="password" class="form-control" name="password" />
                  </div>
              </div>

              <div class="form-group">
                  <label class="col-lg-4 control-label">确认密码</label>
                  <div class="col-lg-5">
                      <input type="password" class="form-control" name="confirmPassword" />
                  </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" for="submit">&nbsp;修&nbsp;&nbsp;改&nbsp;</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">&nbsp;取&nbsp;&nbsp;消&nbsp;</button>
          </div>
        </div>
      </div>
    </div>

    <!-- user logout -->
    <div class="modal fade" id="modal-logout">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <p>退出系统？</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" for="confirm">注&nbsp;&nbsp;销</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">取&nbsp;&nbsp;消</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.validation.min.js"></script>
    <script type="text/javascript">
      $.global = {  
        error: false,
        debug: true,
        user: undefined,
        timeout: 500
      };

      $(document).ajaxStart(function(){
        $('#modal-load').modal({backdrop: 'static',show:true, keyboard: false});
      });

      $(document).ajaxStop(function() {
        // place code to be executed on completion of last outstanding ajax call here
        if (!$.global.error) $('#modal-load').modal('hide');
      });

      $( document ).ready(function() {
        $("body").niceScroll({cursorcolor:"#101010",cursorborder:0});   
        // bind navigation
        $("div[role=navigation]").find('.navbar-nav').find('a:not(.dropdown-toggle)').click(function(e) {
          e.preventDefault();
          var target = $(this).attr('href');
          if (target == '#') return false;
          var dropdown = $(this).parent().parent().attr('class') == 'dropdown-menu' ? true : false;
          if (dropdown) {
            $(this).parent().parent().parent().parent().find('>li').each(function() { $(this).removeClass('active'); $(this).removeClass('open'); });
            $(this).parent().parent().parent().addClass('active');
          } else {
            $(this).parent().parent().find('>li').each(function() { $(this).removeClass('active'); $(this).removeClass('open'); });
            $(this).parent().addClass('active');
          }
          // load target page
          load_content(target);
          return false;
        });

        // load user info
        var _load_user_info = function() {
          $.ajax({
            url: "user/info",
            success: function(data, status) {
              if (data == undefined || data.user == undefined) {
                $.global.error = true;
                $("#modal-load").find("img").attr('src', 'images/warn.png');
                $("#modal-load").find("span").attr('class', 'label label-warning').html('内容加载失败，请稍后刷新页面再试。');
              } else {
                $.global.error = false;
                $.global.user = data.user;
                $("#modal-user-info").find('p[for=account]').html(data.user.account);
                if (data.user.role == 1) {
                  $("#modal-user-info").find('p[for=role]').html('<span class="label label-danger">管理员</span>');
                } else if (data.user.role == 2) {
                  $("#modal-user-info").find('p[for=role]').html('<span class="label label-primary">计划员</span>');
                } else if (data.user.role == 3) {
                  $("#modal-user-info").find('p[for=role]').html('<span class="label label-success">采购员</span>');
                } else if (data.user.role == 4) {
                  $("#modal-user-info").find('p[for=role]').html('<span class="label label-info">汇总员</span>');
                } else if (data.user.role == 5) {
                  $("#modal-user-info").find('p[for=role]').html('<span class="label label-warning">材料员</span>');
                } else if (data.user.role == 6) {
                  $("#modal-user-info").find('p[for=role]').html('<span class="label label-default">施工员</span>');
                } else {
                  $("#modal-user-info").find('p[for=role]').html('<span class="label label-danger">角色错误</span>');
                }
                setTimeout(function(){$('#modal-load').modal('hide')} , $.global.timeout);
              }
            },
            error: function(hxr, status, error) {
              $.global.error = true;
              $("#modal-load").find("img").attr('src', 'images/warn.png');
              $("#modal-load").find("span").attr('class', 'label label-warning').html('内容加载失败，请稍后刷新页面再试。');
            }
          });
        }

        // bind user logout
        $("#modal-logout").find("button[for=confirm]").click(function() {
          $.ajax({
            url: "user/logout",
            complete: function() {
              $('#modal-logout').modal('hide');
              $.global.error = true;
            },
            success: function(data, status) {
              $("#modal-load").find("img").attr('src', 'images/loader.gif');
              $("#modal-load").find("span").attr('class', 'label label-success').html('您已退出系统，请稍后...');
              setTimeout(function(){location.href="index.html"} , $.global.timeout);          
            },
            error: function(hxr, status, error) {
              $("#modal-load").find("img").attr('src', 'images/warn.png');
              $("#modal-load").find("span").attr('class', 'label label-warning').html('注销失败，请稍后再试！');              
              setTimeout(function(){$('#modal-load').modal('hide')} , $.global.timeout);
            }
          }); 
        });

        $("#modal-user-passwd").find("button[for=submit]").click(function() {
          $('#form-user-passwd').submit();
        });
        $('#modal-user-passwd').on('hidden.bs.modal', function (e) {
          $('#form-user-passwd').data('bootstrapValidator').resetForm(true);
        })        

        $('#form-user-passwd').bootstrapValidator({
            message: '该项值不可为空！',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                current: {
                    message: '当前密码输入不正确',
                    validators: {
                        notEmpty: {
                            message: '请输入当前密码'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '密码只能由英文字母、数字、点和下划线'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '请输入新密码'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '密码长度限制在6-30个字符'
                        },
                        different: {
                            field: 'current',
                            message: '新密码和当前密码相同'
                        }
                    }
                },
                confirmPassword: {
                    validators: {
                        notEmpty: {
                            message: '请确认您的新密码'
                        },
                        identical: {
                            field: 'password',
                            message: '确认密码不一致'
                        }
                    }
                }
            }
        });
        // load user info
        _load_user_info();
        // load default page
        load_content('project/detail.html');
      });

      // auto load content
      function load_content(page) {
        $("#modal-load").find("img").attr('src', 'images/loader.gif');
        $("#modal-load").find("span").attr('class', 'label label-info').html('内容加载中，请稍后...'); 
        $("div[role=content]").load('templates/' + page + ($.global.debug ? '?' + new Date().getTime() : '' ), function(response, status) { 
          if (status == 'success') {  // ok
            $.global.error = false;
          } else if (status == 'timeout') { // timeout
            $.global.error = true;
            $("#modal-load").find("img").attr('src', 'images/warn.png');
            $("#modal-load").find("span").attr('class', 'label label-warning').html('页面加载超时，跳转主页...'); 
            setTimeout(function(){location.href="home.html"} , $.global.timeout);
          } else { // error            
            $.global.error = true;
            $("#modal-load").find("img").attr('src', 'images/cross.png');
            $("#modal-load").find("span").attr('class', 'label label-danger').html('页面加载失败，跳转主页...');
            setTimeout(function(){location.href="home.html"} , $.global.timeout);
          }
        });
      }
    </script>
  </body>
</html>